<template>
    <div id="goods">
        <Separator :nameList='nameList'></Separator>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-input placeholder="请输入内容" v-model="goodsList.query" class="input-with-select" clearable  @clear='sreachBtn'>
                    <el-button slot="append" icon="el-icon-search" @click="sreachBtn" ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="12"><el-button type="primary" @click="addGoodsList">添加商品</el-button></el-col>
            </el-row>
             <el-table :data="goodsListValue" border  style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="400"></el-table-column>
                <el-table-column prop="goods_price" label="商品价格（元）"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
                <el-table-column prop="add_time" label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dataFilter}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delGoodsList(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="goodsSizeChange" @current-change="goodsCurrentChange"
                             :current-page="goodsList.pagenum"
                             :page-sizes="[2, 4, 6]"
                             :page-size="goodsList.pagesize"
                              layout="total, prev, pager, next, jumper"
                             :total="goodsTotal"  background>
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
  import Separator from 'components/content/separator/Separator' 
  import {getGoodsList,delGoodsList} from 'network/goods/goods'
  export default {
    name:'Goods',
    components:{
        Separator
    },
    data(){
        return{
            nameList:['商品管理','商品列表'],
            goodsList:{
                query:'',
                pagenum:1,
                pagesize:5
            },
            //保存商品列表
            goodsListValue:[],
            //    总条数 
            goodsTotal:0
        }
    },
    created(){
       this.getGoods(this.goodsList);
    //    this.goodsListValue.add_time*1000
    //    this.goodsListValue.add_time=new data()
    },
    methods:{
        getGoods(type){
            getGoodsList(type.query,type.pagenum,type.pagesize).then(res=>{
                this.goodsListValue=res.data.data.goods;
                this.goodsTotal = res.data.data.total;
                console.log(this.goodsListValue);
                console.log(res);
            },err=>{
                console.log(err);
            })
        },
        //每条页数发生改变时触发
        goodsSizeChange(pagesize){
           this.goodsList.pagesize=pagesize;
           this.getGoods(this.goodsList);
        },
        //当前页发生改变时触发
        goodsCurrentChange(pagenum){
            this.goodsList.pagenum=pagenum;
            this.getGoods(this.goodsList);
        },
       //搜索按钮
       sreachBtn(){
           console.log(this.goodsList.query);
           this.getGoods(this.goodsList);
       },
       //删除商品列表
       delGoodsList(config){
         delGoodsList(config.goods_id).then(res=>{
                console.log(res)

           this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
           }).then(() => {
               if(res.data.meta.status!==200){
                return this.$message.error('删除列表失败'); 
             } 
             this.getGoods(this.goodsList);  
             this.$message({type: 'success',  message: '删除成功!'
          });
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });          
        });   
             
         },err=>{
           console.log(err);
         })
       },
       //添加商品按钮
       addGoodsList(){
           this.$router.push('/goods/AddGoods');
       }
    }
  }
</script>

<style lang="less" scoped>
  .el-table{
      margin-top: 15px;
  }
  .el-pagination{
      margin-top: 15px;
  }
</style>